/* 主体排版样式 */
/* 容器样式 */
.container {
    display: flex;
    justify-content: space-between;  /* 容器内容水平分布 */
    gap: 20px;  /* 列间距 */
}

/* 左边栏通用样式 */
.left-column {
    flex: 0 0 20%;  /* 左边栏占 65% 宽度 */
    padding: 20px;
    background-color: #fff;
    border-right: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    order: -1;  /* 设置优先加载，放在最前面 */
}

/* 右边栏或其他内容样式 */
.right-column {
    flex: 1;  /* 右边栏占剩余空间 */
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* 卡片式动态 */
.post {
    display: flex;
    gap: 1em;
    margin-bottom: 1.5em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.post img.avatar {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.post .post-content {
    flex: 1;
}

.post .timestamp {
    font-size: 0.8em;
    color: #999;
    margin-top: 0.5em;
    display: block;
}

/* 发布新内容表单样式 */
#post-form {
    background-color: #fefefe; /* 更明亮的背景 */
    padding: 2em;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 更轻微的阴影效果 */
    max-width: 600px; /* 限制表单宽度，居中显示 */
    margin: 0 auto; /* 居中表单 */
}

#post-form h3 {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 1em;
    text-align: center; /* 标题居中 */
}

/* 表单输入框和选择框 */
#post-form textarea, 
#post-form select {
    width: 100%;
    padding: 0.8em;
    margin-bottom: 1.2em;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* 内部阴影 */
    transition: border-color 0.3s ease;
}

#post-form textarea:focus, 
#post-form select:focus {
    border-color: #4A90E2;
    outline: none; /* 去掉默认的聚焦边框 */
}

/* 标签复选框 */
#post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.5em;
}

#post-tags label {
    display: inline-flex;
    align-items: center;
    font-size: 0.9em;
    color: #555;
    cursor: pointer;
    padding: 0.3em 0.6em;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#post-tags label:hover {
    background-color: #f0f8ff;
    border-color: #4A90E2;
}

#post-tags input[type="checkbox"] {
    margin-right: 0.5em;
}

/* 提交按钮 */
#post-form button[type="submit"] {
    display: block;
    margin: 0 auto; /* 居中按钮 */
    padding: 0.8em 2em;
    font-size: 1.1em;
    font-weight: bold;
    background-color: #4A90E2;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#post-form button[type="submit"]:hover {
    background-color: #357ABD;
}

.post-image {
    width: 100%; /* 根据需要也可以用固定值，如 300px */
    max-width: 300px; /* 限制最大宽度 */
    height: auto; /* 保持比例缩放 */
    display: block;
    margin: 10px 0; /* 适当的上下边距 */
    border-radius: 8px; /* 圆角 */
    object-fit: cover; /* 确保图片适配容器 */
}


/* 推荐区域样式 */
.recommendation-section {
    background: #f9f9f9;
    padding: 1.5em;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 2em;
}

.recommendation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommendation-list li {
    margin-bottom: 0.8em;
}

.recommendation-list a {
    text-decoration: none;
    color: #4A90E2;
    font-weight: bold;
    transition: color 0.3s;
}

.recommendation-list a:hover {
    color: #357ABD;
}

/* 媒体查询：优化小屏幕显示 */
@media (max-width: 768px) {
    #post-form {
        padding: 1.5em;
        max-width: 100%; /* 宽度占满屏幕 */
    }

    #post-form h3 {
        font-size: 1.5em;
    }

    #post-tags {
        gap: 5px;
    }

    #post-tags label {
        font-size: 0.8em;
        padding: 0.2em 0.5em;
    }

    #post-form button[type="submit"] {
        font-size: 1em;
        padding: 0.6em 1.5em;
    }
}

/* 热门话题部分 */
#popular-topics {
    margin-bottom: 1.5em; /* 增加底部间距，分隔各部分 */
    padding: 1em;
    background-color: #f9f9f9; /* 柔和的背景色 */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#popular-topics h3 {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.8em;
    border-bottom: 2px solid #4A90E2; /* 标题下增加一条装饰线 */
    padding-bottom: 0.5em;
}

#popular-topics ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#popular-topics li {
    margin-bottom: 0.5em;
}

#popular-topics a {
    text-decoration: none;
    color: #4A90E2;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

#popular-topics a:hover {
    color: #357ABD;
    text-decoration: underline;
}

/* 活跃用户榜部分 */
#active-users {
    margin-bottom: 1.5em;
    padding: 1em;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#active-users h3 {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.8em;
    border-bottom: 2px solid #4A90E2;
    padding-bottom: 0.5em;
}

#active-users ol {
    padding-left: 20px; /* 列表左缩进 */
    margin: 0;
}

#active-users li {
    font-size: 0.9em;
    line-height: 1.6;
    color: #555;
}

/* 社区规则部分 */
#community-rules {
    padding: 1em;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#community-rules h3 {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.8em;
    border-bottom: 2px solid #4A90E2;
    padding-bottom: 0.5em;
}

#community-rules ul {
    list-style: disc;
    padding-left: 20px; /* 列表左缩进 */
    margin: 0;
}

#community-rules li {
    font-size: 0.9em;
    line-height: 1.6;
    color: #555;
}

#community-rules a {
    display: inline-block;
    margin-top: 1em;
    color: #4A90E2;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
}

#community-rules a:hover {
    text-decoration: underline;
    color: #357ABD;
}
